<template>
    <div class="app-container">
        <el-card class="box-card">
            <div class="mb-4">
                <el-button type="primary" size="default" @click="handleEdit">编辑</el-button>
            </div>
            
            <el-form ref="form1" :inline="false" :model="formData" :rules="rules1" label-width="120px" size="normal">
                <el-form-item label="奖励名称" prop="title">
                    <el-input
                    v-model="detailData.title"
                    placeholder="奖励名称"
                    disabled
                    />
                </el-form-item>
                <el-form-item label="奖励ID" prop="id">
                    <el-input
                    v-model="detailData.id"
                    placeholder="奖励ID"
                    disabled
                    />
                </el-form-item>
                <el-form-item label="奖品标签" prop="label">
                    <el-input
                    v-model="detailData.label"
                    placeholder="奖品标签"
                    disabled
                    />
                </el-form-item>
                <el-form-item label="打卡天数" prop="day">
                    <el-input
                    v-model="detailData.day"
                    placeholder="打卡天数"
                    disabled
                    />
                </el-form-item>
                
                <el-form-item label="剩余数量" prop="inventory">
                    <el-input
                    v-model="detailData.inventory"
                    placeholder="剩余数量"
                    disabled
                    />
                </el-form-item>
                <el-form-item label="状态" prop="is_active">
                    <el-tag v-if="detailData.is_active === 1" type="success">上架</el-tag>
                    <el-tag v-if="detailData.is_active === 0" type="danger">下架</el-tag>
                </el-form-item>
                <el-form-item label="展示图片">
                    <!-- detailData.show_picture -->
                    <div class="block" v-for="(url,index) in detailData.show_picture" :key="index">
                        <el-image
                        style="width: 100px; height: 100px"
                        :src="url"
                        fit="fill"></el-image>
                    </div>
                </el-form-item>
                <el-form-item label="介绍图片" prop="detail">
                    <div class="block2">
                        <el-image :src="detailData.detail" fit="fill" :lazy="true">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
  
        
        <addEditModal
            :dialogVisible.sync="dialogVisible"
            :title.sync="dialogTitle"
            :info="info"
            @updateTable="getTableData"
        ></addEditModal>
    </div>
</template>
  
<script>
    import { wishProductDetail, labelList, wishProductSave } from '@/api/wishingHouse'
    import addEditModal from './childComps/addEditModal'
  	export default {
        name: 'wishingDetail',
        components: {addEditModal},
        data() {
            return {
                info: {},
                dialogTitle: undefined,
                disabled: false,
                dialogVisible: false,
                dialogVisible1: false,
                detailData: {
                    id: undefined,
                    title: undefined,
                    day: undefined,
                    label: undefined,
                    inventory: undefined,
                    is_active: undefined,
                    show_picture: undefined,
                    main_picture: undefined
                },
                formData: {
                    giftId: undefined
                },
                rules1: {
                    giftId: [{ required: true, message: '请输入打卡天数', trigger: 'blur' }]
                },
                loading: false,
                tableData: [{}],
                listQuery: {
                    page: 1,
                    perPage: 10
                },
                total: 1,
                options: []
            }
        },
        created() {
            this.listQuery.id = this.$route.query.id == 0 ? 0 : this.$route.query.id ? this.$route.query.id : undefined
            this.getLabelList()
            this.getTableData()
        },
        methods: {
            indexMethod(index) {
                return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
            },
            // 网络请求
            /**
             * getTableData
             * @desc 获取表格数据
             */
            async getTableData() {
                this.loading = true
                for (let key in this.listQuery) {
                    this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
                }
                const detail = await wishProductDetail(this.listQuery)
                if (detail.code === 200) {
                    this.detailData = detail.data
                }
                this.loading = false
        
            },
            getLabelList() {
                labelList({
                    page: 1,
                    perPage: 1000
                }).then(res =>{
                    if(res.code === 200) {
                        this.options = res.data.list
                    }
                })
            },
            closeDialog(form) {
                if (this.$refs[form]) {
                    this.$refs[form].clearValidate() // 清除整个表单的校验
                    this.$refs[form].resetFields() // 清除整个表单的校验
                }
            },
            
            handleOnSubmit() {
                
                this.$refs['form1'].validate(valid => {
                    if (valid) {
                        
                        for (let key in this.formData) {
                            this.formData[key] = this.formData[key] === '' || this.formData[key] === undefined ? 0 : this.formData[key]
                        }
                        this.formData.show_picture.map((item,index) => {
                            console.log(item)
                            if(!item) {
                                this.formData.show_picture.splice(index,1)
                            }
                        })
                        wishProductSave(this.formData).then(res => {
                            if(res.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '操作成功'
                                })
                            }
                            this.dialogVisible = false
                            this.getTableData()
                        })
                        
                    }
                })
            },
            handleEdit() {
                // this.dialogVisible1 = true
                // this.formData.id = this.listQuery.id
                // this.formData = JSON.parse(JSON.stringify(this.detailData))
                this.detailData.shows = []
                this.detailData.show_picture.map(item => {
                    this.detailData.shows.push({
                        url: item
                    })
                })
                this.dialogVisible = true
                this.detailData.id = this.listQuery.id
                this.dialogTitle = 'edit'
                this.info = this.detailData
            },
            beforeAvatarUpload(file) {
                // const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp' || file.type === 'image/gif'
                // const isLt2M = file.size / 1024 / 1024 < 2

                // if (!isJPG) {
                //     this.$message.error('请上传JPG/PNG格式的图片!')
                // }
                // if (!isLt2M) {
                //     this.$message.error('上传图片大小不能超过 2MB!')
                // }
                // return isJPG && isLt2M
            },
            handlePictureSuccess(response, file, fileList) {
                console.log(response, file, fileList)
                // this.formData.show_picture[index] = this.ossLastImgUrl
                // this.$set(this.formData.show_picture,index,this.ossLastImgUrl)
            },
            handlePictureRemove(index) {
                this.formData.show_picture[index] = undefined
                this.$set(this.formData.show_picture,index,undefined)
            },
            handlePictureSuccess1() {
                this.formData.main_picture = this.ossLastImgUrl
                console.log('formData',this.formData)
            },
            handlePictureRemove1() {
                this.formData.main_picture = undefined
            },
        }
    }
</script>
  
<style lang="scss" scoped>
.infoBox {
  margin-top: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border: 1px solid #999999;
  border-radius: 10px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  box-sizing: border-box;
  padding-right: 30px;
  .info_1{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;

    .info_2{
      margin-top: 15px;
      display: flex;
      align-items: center;
	  position: relative;

      span{
        width: 180px;
        text-align: right;
      }
	  .tip{
			color: red;
			font-size: 12px;
			position: absolute;
			top: 100%;
			left: 120px;
		}
    }
  }
}
.item {
    width: 100px;
}
.formItemBox{
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	width: 100%;
	overflow: hidden;
}
::v-deep {
	.formItemBox{
		.el-form-item {
			width: 50% !important;
		}
	}
    .upload-demo {
        overflow: hidden;
        width: 148px;
        height: 148px;
        position: relative;
        z-index: 1;
    }
    .hide_box{
        .el-upload--picture-card {
            display: none;
        }
    }
    .show_box{
        
        .el-upload-list__item.is-success {
            display: none;
        }
    }
    .el-upload-list--picture-card{
        .el-upload-list__item {
            margin: auto;
        }
    }

    .image-slot {
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        font-size: 36px;
        border: 1px dashed #999;
        border-radius: 4px;
    }
}

.block {
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: inline-block;
    margin-right: 10px;
}

.block2 {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 36px;
}
.awardBox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    .awardInfo {
        margin-right: 10px;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        width: 148px;
        height: 148px;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;

        .closeIcon {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            background: rgba(0,0,0,.6);
            color: #ffffff;
            overflow: hidden;
            cursor: pointer;
            font-size: 18px;
            opacity: 0;
            z-index: 0;
        }
    }
    .hide_box:hover {
        .closeIcon {
            opacity: 1;
            z-index: 1;
        }
    }
    .show_box {
        .closeIcon {
            opacity: 0;
            z-index: -1;
        }
    }
}

</style>
  